<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用document对象操作页面</title>
    <style type="text/css">
        body,input,div,p {margin: 0;padding: 0;}
        body{font-size: 14px; font-family: "微软雅黑"; line-height: 25px;}
        .content{width: 550px; margin: 0 auto;}
        .content img{ float: left; width: 150px;}
        .r{float: left; width: 400px;}
        input[name="changeBook"]{
            width: 100px;
            height: 28px;
            line-height: 28px;
            text-align: center;
            font-size: 14px; font-family: "微软雅黑";
            margin: 10px 0 10px 0;
        }
        input[name="season"]{
            width: 50px; text-align: center;
        }
        #result{
            color:red;
            font-size:20px;
            font-weight: bolder;
        }
        .textfield{
            border:2px solid red;
        }
    </style>
</head>
<body>
<div class="content">
    <img id="bookCover" src="img/vuejs.jpg" width="200" height="200" alt="Vue.js从入门到项目实战"/>
    <div class="r">
        <div id="book">书名:<span id="title">Vue.js从入门到项目实战</span></div>
        <input name="changeBook" value="换换名称" type="button" onclick="change();" /><br>
        一年四季名称：
        <input name="season" class="textfield" type="text" value="春天" />
        <input name="season" class="textfield" type="text" value="夏天" />
        <input name="season" class="textfield" type="text" value="秋天" />
        <input name="season" class="textfield" type="text" value="冬天" />
        <br><br>
        <input id="b1" type="button" value="getElementsByName()" onclick="getSeason1()" />
        <input id="b2" type="button" value="getElementsByTagName()" onclick="getSeason2()" />
        <input id="b3" type="button" value="getElementsByClassName()" onclick="getSeason3()" />
        <input id="b4" type="button" value="querySelectorAll()" onclick="getSeason4()" />
    </div>
    <div>
        业余爱好：
        <input type="checkbox" name="hobby" value="音乐">音乐
        <input type="checkbox" name="hobby" value="登山">登山
        <input type="checkbox" name="hobby" value="游泳">游泳
        <input type="checkbox" name="hobby" value="阅读">阅读
        <input type="checkbox" name="hobby" value="打球">打球
        <input type="checkbox" name="hobby" value="跑步">跑步<br>
        <input type="button" value = "全选" id="btnCheckAll" onclick="checkAll()">
        <input type="button" value = "全不选" id="btnUnCheckAll" onclick="unCheckAll()">
        <input type="button" value = "反选" id="btnReverse" onclick="reverse()">
    </div>
    <div id="result">

    </div>
</div>

<script>

    //    function allChoose() {
    //        var all=document.getElementsByName("hobby");
    //        for (let i = 0; i <all.length ; i++) {
    //            all[i].checked=true;
    //        }
    //    }
    //
    //    function cancelAll() {
    //        var all1=document.getElementsByName("hobby");
    //        for (let j = 0; j <all1.length ; j++) {
    //            all1[j].checked=false;
    //        }
    //    }
    //
    //    function fan() {
    //            var all2=document.getElementsByName("hobby");
    //            for (let k = 0; k <all2.length ; k++) {
    //                all2[k].checked=!(all2[k].checked);
    //            }
    //
    //
    //    function change() {
    //        let imgBook = document.getElementById("bookCover");
    //        let title = document.getElementById("title");
    //        imgBook.setAttribute("alt","HTML5+CSS3+JavaScript从入门到精通");
    //        imgBook.setAttribute("title","HTML5+CSS3+JavaScript从入门到精通");
    //        imgBook.setAttribute("src","img/javascript.jpg");
    //        title.innerText = "HTML5+CSS3+JavaScript从入门到精通";
    //    }
    function getSeason1() {
        let str = "";
        let seasons = document.getElementsByName("season"); //NodeList
        console.dir(seasons);
        console.log(Object.prototype.toString.call(seasons));
        seasons.forEach(function (obj,index) {
            str += obj.value + "<br>";
        });
        let result = document.querySelector("#result");
        //Object.prototype.toString.call(对象名)作用检测对象类型
        //console.log(Object.prototype.toString.call(result));
        result.innerHTML = str;
    }

    function getSeason2() {
        let str = "";
        let seasons = document.getElementsByTagName("input"); //HTMLCollection 伪数组 转换  Array
        //console.dir()可以显示一个对象所有的属性、方法和事件。
        console.dir(seasons);
        /*
        * Array.prototype.slice.call(fakeArray);    Array
        * [... fakeArray]    Array  [... 数组名]扩展运算符作用：将一个数组转为用逗号分隔的参数序列。
        *
        * */
        console.log(Object.prototype.toString.call(seasons));
        /* Array.prototype.slice.call(seasons,0).forEach(function (obj,index) {
             if(obj.type == "text") {
                 str += obj.value + "<br>";
             }
         });*/

        [...seasons].forEach(function (obj,index) {
            if(obj.type == "text") {
                str += obj.value + "<br>";
            }
        });
        console.log(Object.prototype.toString.call( [...seasons]));
        let result = document.querySelector("#result");
        //Object.prototype.toString.call(对象名)作用检测对象类型
        //console.log(Object.prototype.toString.call(result));
        result.innerHTML = str;

    }

    function getSeason3() {
        let seasons = document.getElementsByClassName("textfield");//HTMLCollection
        console.log(Object.prototype.toString.apply(seasons));
        /*for (let i = 0; i < seasons.length; i++) {

        }

        for(let index in seasons){

       }

     [... seasons].forEach(function (season,i) {

       });*/
        let str = "";
        for(let oInput of seasons){
            str +=  oInput.value + "<br>";
        }
        let result = document.getElementById("result");
        result.innerHTML = str;

    }

    function getSeason4(){
        //1、querySelector只返回匹配的第一个元素，如果没有匹配项，返回null。
        //2、querySelectorAll返回匹配的元素集合，如果没有匹配项，返回空的NodeList(节点数组)。
        let oInputs = document.querySelectorAll("div.r>input[type=text]");
        //forEach() 方法用于调用数组的每个元素，并将元素传递给回调函数。
        let str = "";
        oInputs.forEach(function(oinput){
            str += oinput.value + "<br>";
        });
        let result = document.getElementById("result");
        result.innerHTML = str;
    }


    //全选
    function checkAll() {
        let hobbies = document.getElementsByName("hobby");
        for (let i = 0; i < hobbies.length; i++) {
            let checkbox = hobbies[i];
            checkbox.checked = true;
        }
    }

    //全不选
    function unCheckAll(){
        let hobbies = document.getElementsByName("hobby");
        for (let i = 0; i < hobbies.length; i++) {
            let checkbox = hobbies[i];
            checkbox.checked = false;
        }
    }
    //反选
    function reverse(){
        let hobbies = document.getElementsByName("hobby");
        for (let i = 0; i < hobbies.length; i++) {
            /*let checkbox = hobbies[i];
            if(checkbox.checked == true){
                checkbox.checked = false;
            }
            else{
                checkbox.checked = true;
            }*/
            hobbies[i].checked = ! hobbies[i].checked;
        }
    }

    window.onload = function () {
        let oCheckAll = document.getElementById("btnCheckAll");
        let oUnCheckAll = document.getElementById("btnUnCheckAll");
        let oReverse = document.getElementById("btnReverse");
        //动态绑定事件
        oCheckAll.addEventListener("click",checkAll,false);
        oUnCheckAll.addEventListener("click",unCheckAll,false);
        oReverse.addEventListener("click",reverse,false);

    }

</script>
</body>
</html>